<template>
    <div v-if="show">
        <el-dialog
            class="dialog-pages"
            title="选择页面"
            width="800px"
            top="10vh"
            v-model="data.showPage"
            :append-to-body="true"
            :destroy-on-close="true"
            @close="onClose"
        >
            <el-tabs v-model="tabName" @tab-click="handleTab">
                <el-tab-pane label="装修页面" name="0">
                    <el-table
                        class="table-mb"
                        :data="data.pageArrs"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        v-loading="data.pageLoading"
                    >
                        <el-table-column
                            prop="title"
                            label="页面名称"
                        ></el-table-column>
                        <el-table-column
                            prop="updated"
                            label="最后保存时间"
                        ></el-table-column>
                        <el-table-column
                            label="操作"
                            width="120"
                            class-name="operation-nav"
                            fixed="right"
                        >
                            <template #default="{ row }">
                                <p
                                    class="link-p"
                                    :style="{
                                        color: row.show ? '#4B93FA' : '#646566',
                                    }"
                                    @click.stop="
                                        row.show ? '' : handleSelect(row)
                                    "
                                >
                                    {{ row.show ? "已选" : "选择" }}
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        v-model:current-page="data.linkPage"
                        :page-size="10"
                        :total="data.totalPage"
                        layout="total, prev, pager, next, jumper"
                    >
                        <span class="color-#606266"
                            >共&nbsp;{{
                                totalNums >= 100 * pageSize
                                    ? `${100 * pageSize}+`
                                    : totalNums
                            }}&nbsp;条</span
                        >
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="功能页面" name="1">
                    <el-table
                        class="table-mb"
                        :data="data.pageFunArrs"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        height="520"
                    >
                        <el-table-column
                            prop="title"
                            label="页面名称"
                        ></el-table-column>
                        <el-table-column
                            label="操作"
                            width="120"
                            class-name="operation-nav"
                            fixed="right"
                        >
                            <template #default="{ row }">
                                <p
                                    class="link-p"
                                    :style="{
                                        color: row.show ? '#4B93FA' : '#646566',
                                    }"
                                    @click.stop="
                                        row.show ? '' : handleSelect(row)
                                    "
                                >
                                    {{ row.show ? "已选" : "选择" }}
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="文章列表" name="2" v-if="showNewList">
                    <el-table
                        class="table-mb"
                        :data="data.cateNewList"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        v-loading="data.cateNewListLoading"
                    >
                        <!-- <el-table-column
                            prop="article_id"
                            label="文章ID"
                            width="150"
                        ></el-table-column> -->
                        <el-table-column
                            prop="title"
                            label="文章标题"
                        ></el-table-column>
                        <el-table-column
                            label="操作"
                            width="120"
                            class-name="operation-nav"
                            fixed="right"
                        >
                            <template #default="scope">
                                <p
                                    class="link-p"
                                    :style="{
                                        color: scope.row.show
                                            ? '#4B93FA'
                                            : '#646566',
                                    }"
                                    @click.stop="
                                        scope.row.show
                                            ? ''
                                            : handleSelect(
                                                  scope.row,
                                                  scope.$index
                                              )
                                    "
                                >
                                    {{ scope.row.show ? "已选" : "选择" }}
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        v-model:current-page="data.cateNewListPage"
                        :page-size="10"
                        :total="data.cateNewListGount"
                        layout="total, prev, pager, next, jumper"
                    >
                        <span class="color-#606266"
                            >共&nbsp;{{
                                totalNums >= 100 * pageSize
                                    ? `${100 * pageSize}+`
                                    : totalNums
                            }}&nbsp;条</span
                        >
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="跳转小程序" name="3" v-if="showJumpXcx">
                    <div class="xcx-box">
                        <div class="tag-item">
                            <div class="tag-item__label">AppID</div>
                            <div class="tag-item__right">
                                <el-input
                                    v-model.trim="appid"
                                    clearable
                                    placeholder="请输入要跳转的小程序AppID"
                                />
                            </div>
                        </div>
                        <div class="tag-item">
                            <div class="tag-item__label">页面路径</div>
                            <div class="tag-item__right">
                                <el-input
                                    v-model.trim="page_url"
                                    clearable
                                    placeholder="请输入要跳转的小程序路径"
                                />
                            </div>
                        </div>
                        <div class="tag-item" style="margin-top: 30px">
                            <div class="tag-item__label"></div>
                            <div class="tag-item__right">
                                <el-button type="primary" @click="confirmXCX"
                                    >确认</el-button
                                >
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>
<script setup>
import {
    reactive,
    onMounted,
    ref,
    getCurrentInstance,
    onBeforeUnmount,
    watch,
} from "vue";
import EventBus from "@common/event-bus"; // EventBus事件总线，任意组件通信
const { proxy } = getCurrentInstance();
/** 自定义页面路径 */
const indexPage = "/pages/index/index";
const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    // 文章列表
    showNewList: {
        type: Boolean,
        default: false,
    },
    // 跳转小程序
    showJumpXcx: {
        type: Boolean,
        default: false,
    },
    // tab标签index
    names: {
        type: String,
        default: "0",
    },
});

const data = reactive({
    showPage: true, // 是否显示弹窗
    linkItem: {}, // 当前选中的页面数据
    pageArrs: [], // 自定义页面

    // 功能页面
    totalPage: 0, // 功能页总数
    pageLoading: false, // 加载状态
    linkPage: 1, // 当前页码
    pageFunArrs: [
        {
            title: "首页",
            url: "/pages/tabbar/home/index",
            type: "switchTab",
        },
        {
            title: "查件",
            url: "/pages/tabbar/order/index",
            type: "switchTab",
        },
        {
            title: "消息",
            url: "/pages/tabbar/info/index",
            type: "switchTab",
        },
        {
            title: "我的",
            url: "/pages/tabbar/personal/index",
            type: "switchTab",
        },
        {
            title: "下单",
            url: "/pages/order/payOrder/index",
            type: "navigate",
        },
        {
            title: "路线",
            url: "/pages/order/itinerary/index",
            type: "navigate",
        },
		{
		    title: "费用补款",
		    url: "/pages/home/supplementary/index",
		    type: "navigate",
		},
		{
		    title: "费用退款",
		    url: "/pages/home/refund/index",
		    type: "navigate",
		},
		{
		    title: "违禁物品",
		    url: "/pages/home/contraband/index",
		    type: "navigate",
		},
        {
            title: "联系客服",
            url: "/pages/personal/kefu/index",
            type: "navigate",
        },
    ],

    // 文章列表
    cateNewListLoading: false,
    cateNewList: [],
    cateNewListPage: 1,
    cateNewListGount: 0,
});

onBeforeUnmount(() => {
    data.pageLoading = false;
    data.linkItem = {};
    data.linkPage = 1;
    data.pageArrs = [];
    data.catePage = 1;
    data.pubGount = 0;
    data.pubPage = 0;
});

onMounted(() => {
    getPage()
    // props.showCate && getCates()
    // props.showPublic && getPublicGoods()
    // props.showNews && getCateNews()
    props.showNewList && getCateNewList()
});

const tabName = ref("0");
const handleTab = (pane) => {
    tabName.value = pane.index;
};

const emits = defineEmits(["change", "close", "names"]);

// 关闭弹窗
const onClose = () => {
    emits("close");
};

// 监听tabName值变化
watch(
    () => props.names,
    (val, old) => {
        tabName.value = val;
    }
);
watch(tabName, (val, old) => {
    emits("names", val);
});

// 当父组件点击修改触发时
EventBus.on("page_dialog_objs", (val) => {
    if (val && val.link) {
        appid.value = val.link.appid;
        page_url.value = val.link.page_url;
    }
    tabName.value = String(val.page_dialog_index || 0);
    // switch (tabName.value) {
    //     case "0":
    //         // 装修页面
    //         let one_index = data.pageArrs.findIndex((sub) => sub.decorate_id == val.link.page_id)
    //         data.pageArrs.map(item => {
    //             item.show = false
    //         })
    //         data.pageArrs[one_index].show = true
    //         break
    //     case "1":
    //         // 功能页面
    //         let two_index = data.pageFunArrs.findIndex((sub) => sub.url == val.link.url)
    //         data.pageFunArrs.map(item => {
    //             item.show = false
    //         })
    //         data.pageFunArrs[two_index].show = true
    //         break
    //     case "2":
    //         // 商品分类
    //         let three_index = data.cateArrs.findIndex((sub) => sub.cate_id == val.link.cate_id)
    //         data.cateArrs.map(item => {
    //             item.show = false
    //         })
    //         data.cateArrs[three_index].show = true
    //         break
    //     case "3":
    //         // 公共商品
    //         let four_index = data.pubGoods.findIndex((sub) => sub.product_common_id == val.link.pc_id)
    //         data.pubGoods.map(item => {
    //             item.show = false
    //         })
    //         data.pubGoods[four_index].show = true
    //         break
    //     case "4":
    //         // 文章分类
    //         let five_index = data.cateNews.findIndex((sub) => sub.cate_id == val.link.cate_id)
    //         data.cateNews.map(item => {
    //             item.show = false
    //         })
    //         data.cateNews[five_index].show = true
    //         break
    //     case "5":
    //         // 文章列表
    //         let six_index = data.cateNewList.findIndex((sub) => sub.article_id == val.link.article_id)
    //         data.cateNewList.map(item => {
    //             item.show = false
    //         })
    //         data.cateNewList[six_index].show = true
    //         break
    //     default:
    //         break
    // }
});

// 获取功能页面
watch(

    () => data.linkPage,
    (val) => {
		console.log("getPage")
        data.pageArrs = [];
        getPage();
    }
);
function getPage() {
	
    data.pageLoading = true;
    proxy.$axios
        .get("decorates", {
            params: {
                current: data.linkPage,
                size: 14,
            },
        })
        .then((res) => {
            data.pageLoading = false;
            if (res.data.code == 200) {
                let result = res.data.data.records;
                result.map((item) => {
                    item.show = false;
                });
                data.totalPage = res.data.data.total;
				
                data.pageArrs = result;
            } else {
                proxy.$message({ message: res.data.msg, type: "error" });
            }
        })
        .catch((err) => {
            data.pageLoading = false;
        });
}

// 获取分类 后台-product/com
function getCates() {
    proxy.$axios1
        .get("/api/product/cate")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data;
                result.map((item) => {
                    item.show = false;
                });
                data.cateArrs = result;
            } else {
                proxy.$message({ message: res.msg, type: "error" });
            }
        })
        .catch((err) => {});
}

// 获取公共商品
watch(
    () => data.pubPage,
    (val) => {
        data.pubGoods = [];
        getPublicGoods();
    }
);
function getPublicGoods() {
    data.pubGoodLoading = true;
    proxy.$axios1
        .get("/api/product/items", {
            params: {
                page: data.pubPage,
                limit: 13,
            },
        })
        .then((res) => {
            data.pubGoodLoading = false;
            if (res.data.code == 0) {
                let result = res.data.data;
                result.map((item) => {
                    item.show = false;
                });
                data.pubGount = res.data.count;
                data.pubGoods = result;
            } else {
                proxy.$message({ message: res.msg, type: "error" });
            }
        })
        .catch((err) => {
            data.pubGoodLoading = false;
        });
}

// 获取文章分类
watch(
    () => data.cateNewPage,
    (val) => {
        data.cateNews = [];
        getCateNews();
    }
);
function getCateNews() {
    data.cateNewLoading = true;
    proxy.$axios1
        .get("/api/article/cate", {
            params: {
                page: data.cateNewPage,
                limit: 13,
            },
        })
        .then((res) => {
            data.cateNewLoading = false;
            if (res.data.code == 0) {
                let result = res.data.data;
                result.map((item) => {
                    item.show = false;
                });
                data.cateNewGount = res.data.count;
                data.cateNews = result;
            } else {
                proxy.$message({ message: res.msg, type: "error" });
            }
        })
        .catch((err) => {
            data.cateNewLoading = false;
        });
}

// 获取文章列表
watch(
    () => data.cateNewListPage,
    (val) => {
        data.cateNewList = [];
        getCateNewList();
    }
);
function getCateNewList() {
    data.cateNewListLoading = true;
    proxy.$axios
        .get("decorates/contentTitle", {
            params: {
                current: data.cateNewListPage,
                size: 13,
            },
        })
        .then((res) => {
            data.cateNewListLoading = false;
            if (res.data.code == 200) {
                let result = res.data.data.records;
                result.map((item) => {
                    item.show = false;
                });
                data.cateNewListGount = res.data.data.total;
                data.cateNewList = result;
            } else {
                proxy.$message({ message: res.msg, type: "error" });
            }
        })
        .catch((err) => {
            data.cateNewListLoading = false;
        });
}

/**
 * 跳转小程序
 */
const appid = ref("");
const page_url = ref("");
const confirmXCX = () => {
    if (appid.value == "") {
        proxy.$message({
            message: "请输入要跳转的小程序AppID",
            type: "warning",
        });
        return;
    }
    if (page_url.value == "") {
        proxy.$message({
            message: "请输入要跳转的小程序页面路径",
            type: "warning",
        });
        return;
    }
    data.linkItem = {
        urlText: "跳转小程序",
        page_id: 0,
        type: "xcx",
        appid: appid.value,
        page_url: page_url.value,
    };
    emits("change", data.linkItem);
};

/** 选中页面 */
const handleSelect = (row, index) => {
    let page_id =  0;
    let types = row.type ? row.type : "navigate";
    data.linkItem = {
        urlText: row.product_common_id ? row.product_name : row.title,
        page_id: page_id,
    };
    if (tabName.value == 0) {
        // 自定义页面
        data.linkItem.page_id = row.sid;
        data.linkItem.type = "customPage";
    }else if (tabName.value ==2) {
        // 文章列表-链接具体某一篇文章
        data.linkItem.article_id = row.sid;
        data.linkItem.article_name = row.title;
        data.linkItem.type = "cateNewList";
    } else {
        // 功能页或自定义页面
        data.linkItem.url = row.url || indexPage + "?id=" + page_id;
        data.linkItem.type = row.type == 0 ? "switchTab" : types;
    }
    // console.log("data.linkItem ", data.linkItem)
    emits("change", data.linkItem);
};
</script>
<style lang="less" scoped>
.xcx-box {
    margin: 32px 0px 20px;
}
.tag-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: @margin-xl;
    margin-bottom: @margin-md;
    line-height: 36px;
    .tag-item__label {
        flex: none;
        text-align: right;
        width: 120px;
        padding-right: @padding-md;
        font-size: @font-size-md;
        color: @gray-8;
        line-height: 36px;
    }

    .tag-item__right {
        flex: none;
        width: 340px;
        .el-input {
            height: 36px;
            line-height: 36px;
        }
    }
}

.table-mb {
    .link-p {
        cursor: pointer;
        font-size: @font-size-md;
        color: @gray-7;

        &:hover {
            color: @themes !important;
        }
    }

    .link-active {
        color: @themes;
        font-weight: bold;
    }
}
</style>
<style lang="less">
.dialog-pages {
    .el-dialog__body {
        padding: 10px 20px 20px;
    }
}
</style>
